import React, { Component, Fragment } from "react";
import { NavBar, Icon, Tabs, Grid } from "antd-mobile";
import { getCate } from "../../api";

import loading from "../../assets/images/loading.gif";

import "./index.scss";

// 分类
export default class Cate extends Component {
    state = {
        cateData: null,
    };

    async componentDidMount() {
        let res = await getCate();
        this.setState({
            cateData: res.data.message,
        });
    }
    componentDidUpdate() {
        let { cateData } = this.state;
        cateData.map((item) => console.log(item.children));
    }
    render() {
        let { history } = this.props;
        let { cateData } = this.state;

        let cates =
            cateData &&
            cateData.map((v) => {
                return {
                    ...v,
                    title: v.cat_name,
                };
            });

        return (
            <div className="cate">
                <Fragment>
                    <NavBar
                        mode="dark"
                        icon={<Icon type="left" size="lg" />}
                        onLeftClick={() => history.goBack()}
                    >
                        商品分类
                    </NavBar>
                    {cateData && (
                        <Tabs
                            tabs={cates}
                            initalPage={0}
                            animated={false}
                            useOnPan={true}
                            tabBarTextStyle={{
                                width: 86,
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                color: "#666",
                                fontSize: 13,
                            }}
                            tabBarBackgroundColor="#f1f1f1"
                            // 一页显示12个
                            renderTabBar={(props) => (
                                <Tabs.DefaultTabBar {...props} page={12} />
                            )}
                            // 靠左
                            tabBarPosition="left"
                            // 内容垂直
                            tabDirection="vertical"
                        >
                            {cateData &&
                                cateData.map(
                                    (item) =>
                                        item.children &&
                                        item.children.map((val) => (
                                            <div
                                                className="good-list"
                                                key={val.cat_id}
                                            >
                                                <div className="cat-name">
                                                    {val.cat_name}
                                                </div>
                                                <div className="cat-goods">
                                                    {val.children &&
                                                        val.children.map(
                                                            (v) => (
                                                                <div
                                                                    className="cat-good-dan"
                                                                    key={
                                                                        v.cat_id
                                                                    }
                                                                >
                                                                    <img
                                                                        src={
                                                                            v.cat_icon
                                                                        }
                                                                        alt=""
                                                                    />
                                                                    <span>
                                                                        {
                                                                            v.cat_name
                                                                        }
                                                                    </span>
                                                                </div>
                                                            )
                                                        )}
                                                </div>
                                            </div>
                                        ))
                                )}
                        </Tabs>
                    )}
                </Fragment>
                {/* {cateData &&
                    cateData.map(
                        (item) =>
                            item.children &&
                            item.children.map((val) => (
                                <div className="good-list" key={val.cat_id}>
                                    <div className="cat-name">
                                        {val.cat_name}
                                    </div>
                                    <div className="cat-goods">
                                        {val.children &&
                                            val.children.map((v) => (
                                                <div
                                                    className="cat-good-dan"
                                                    key={v.cat_id}
                                                >
                                                    <img
                                                        src={v.cat_icon}
                                                        alt=""
                                                    />
                                                    <span>{v.cat_name}</span>
                                                </div>
                                            ))}
                                    </div>
                                </div>
                            ))
                    )} */}
            </div>
        );
    }
}
